<template>
  <a-modal
    :visible="visible"
    title="预览"
    :footer="null"
    width="70%"
    @cancel="handleCancel">
    <div id="pdf" :style="{'height':modalHeight + 'px'}">
      <div id="demo"></div>
    </div>
  </a-modal>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      pdfh5: null,
      newPdfUrl: '',
      modalHeight: 500
    }
  },
  watch: {
    visible (e) {
      if (e) {
        this.getNumPages()
      }
    }
  },
  mounted () {
    this.modalHeight = Number(document.documentElement.clientHeight * 0.7)
  },
  methods: {
    handleCancel () {
      this.$emit('handleCancel')
    },
    getNumPages () {
      this.$nextTick(() => {
        this.newPdfUrl = 'demo.pdf'
        this.pdfh5 = new Pdfh5('#demo', {
        pdfurl: this.url,
        lazy: true
        })
      }, 200)
    }
  }
}
</script>
